﻿
@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<style type="text/css">
    .topPanel .search .input-group .form-control {
        padding: 4px 5px !important;
        height: 22px !important;
        margin: 0 10px !important;
        width: 80%;
    }

    .zdyPanel {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        margin: 0px;
        float: left;
        width: 100%;
    }

    .zdyTool {
        float: left;
        padding-left: 10px;
        width: 100%;
    }

    .zdyBar {
        height: 50px;
        line-height: 50px;
        padding: 0px;
        width: 100px;
        margin: 0px;
    }

    .trBj {
        background-color: #f5f5f5;
    }

    .trSelectBj {
        background-color: #fff6e5;
    }

    .MyMenu {
        width: 100px;
        height: 100px;
        background-color: #f5f5f5;
    }

    .zdyUL {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .zdyUL li {
        float: left;
        list-style: none;
        height: 20px;
        line-height: 20px;
    }

    .zdyUL li a {
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 4px;
       color: #337ab7;
    }

    .zdyUL li i {
        margin-right: 4px;
        font-size: 13px;
        color: #666;
        vertical-align: middle;
       margin-top: -1px;
    }

   .zdyUL li a:hover {
       text-decoration: none;
       background-color: #1ABC9C;
       color: #fff;
   }
    .form-control {
        height:20px;
        line-height:20px;
        padding:0px;
        border-radius:2px;
    }
    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        padding:3px;
    }
</style>
<script>
    var F_OrderId = $.request("F_OrderId");
    var F_CheckId = $.request("F_CheckId");
    var F_FlowId = $.request("F_FlowId");
    var ApplyType = $.request("ApplyType");


    $(function () {
        $("#MyMenu").hide();        
        var F_Ids = $.request("F_Ids");
        loadData(F_Ids);
        $("#newTable tbody tr").mouseover(function () {
            $(this).addClass("trBj");//添加样式trBj，$(this)表示当前选择的元素。
        });
        $("#newTable tbody tr").mouseout(function () {
            $(this).removeClass("trBj");//去掉样式trBj
        });

        $("#newTable tbody tr").click(function () {
            if ($(this).hasClass("trSelectBj")) {
                $(this).removeClass("trSelectBj");//去掉样式trSelectBj
            } else {
                $(this).addClass("trSelectBj");//添加样式trSelectBj
            }
        });
        $("#newTable tbody tr").dblclick(function () {
            //$(this).after("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
        });
        //$("#newTable tr td").bind("contextmenu", function (e) {
        //    $("#MyMenu").show();
        //    $("#MyMenu").css({
        //        'top': e.pageX + 'px',
        //        'left': e.pageY+'px'
        //    });
        //    return false;
        //});
    });

    function loadData(F_Ids) {
        $.ajax({
            url: "/CheckManager/CheckInfos/GetOrderPriceInfos?F_Ids=" + F_Ids + "",
            dataType: "json",
            async: false,
            success: function (data) {
                if (data != null && data.length>0) {
                    $("#F_ActivityTheme").html(data[0]["F_ActivityTheme"]);
                    $("#F_ActivityCityId").html(data[0]["F_ActivityCityId"]);
                    var newTable = $("#newTable");
                    for (var i = 0; i < data.length; i++) {
                        var trHtml = "<tr id=\"" + data[i]["F_Id"] +"\">";
                        trHtml += "<td id=\"" + data[i]["siteId"] +"\">" + data[i]["SiteName"] + "</td>";
                        trHtml += "<td id=\"" + data[i]["spaceId"] +"\">" + data[i]["SpaceName"] + "</td>";
                        trHtml += "<td><span>" + data[i]["F_ActivityStartDate"] + "至" + data[i]["F_ActivityEndDate"] + "</span></td>";
                        trHtml += "<td><select name=\"F_FeeType\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"1\" selected=\"selected\">场地费</option><option value=\"2\">搭建费</option><option value=\"3\">安保费</option><option value=\"4\">保洁费</option><option value=\"5\">宽带费</option><option value=\"6\">空调费</option><option value=\"7\">撤场</option><option value=\"8\">电费</option><option value=\"9\">消防</option><option value=\"10\">餐饮费</option><option value=\"11\">加班费</option><option value=\"12\">协助申办服务费</option></select></td>";
                        if (data[i]["F_Units"] == "1") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\" selected=\"selected\">元/场</option><option value=\"1\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        } else if (data[i]["F_Units"] == "1") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\" selected=\"selected\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        } else if (data[i]["F_Units"] == "5") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\">元/天</option><option value=\"5\" selected=\"selected\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        } else if (data[i]["F_Units"] == "2") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\" selected=\"selected\">元/周</option><option value=\"3\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        } else if (data[i]["F_Units"] == "3") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\" selected=\"selected\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        } else if (data[i]["F_Units"] == "4") {
                            trHtml += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\">元/月</option><option value=\"4\" selected=\"selected\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
                        }                        
                        trHtml += "<td><input name=\"F_MarketPrice\" type=\"text\" class=\"form-control required\" placeholder=\"市场刊例价\" value=\"" + data[i]["F_MarketPrice"] + "\" /></td>";
                        trHtml += "<td><input name=\"F_YUNSPACEPrice\" onchange=\"textChange(this)\" type=\"text\" class=\"form-control required\" placeholder=\"YUNSPACE价\" value=\"" + data[i]["F_YunPrice"] + "\" /></td>";
                        trHtml += "<td><input name=\"area\" type=\"text\" class=\"form-control\" value=\"" + data[i]["area"] + "\"/></td>";
                        trHtml += "<td><input name=\"Quantity\" type=\"text\" onchange=\"textChange(this)\" class=\"form-control\" value=\"" + data[i]["Quantity"] + "\" /></td>";
                        trHtml += "<td><input name=\"totalPrice\" type=\"text\" class=\"form-control\" value=\"" + data[i]["totalPrice"] + "\" /></td>";
                        trHtml += "<td><ul class=\"zdyUL\" style=\"white-space:nowrap;\"><li><a onclick=\"AddOther(this)\">添加行</a></li></ul></td>";
                        trHtml += "</tr>";
                        newTable.append(trHtml);
                    }
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
        });
    }

    var currentRow;
    function AddOther(obj) {
        currentRow = $(obj).parent().parent().parent().parent();
        var strRow = "<tr id=\"" + currentRow[0].id + "\">";
        strRow += "<td id=\"" + currentRow[0].cells[0].id +"\"></td>";
        strRow += "<td id=\"" + currentRow[0].cells[1].id +"\"></td>";
        strRow += "<td><span style=\"display:none;\">" + currentRow[0].cells[2].innerHTML +"</span></td>";        
        strRow += "<td><select name=\"F_FeeType\" class=\"form-control required\" onchange=\"changeSelect(this)\"><option value=\"\">请选择</option><option value=\"1\">场地费</option><option value=\"2\">搭建费</option><option value=\"3\">安保费</option><option value=\"4\">保洁费</option><option value=\"5\">宽带费</option><option value=\"6\">空调费</option><option value=\"7\">撤场</option><option value=\"8\">电费</option><option value=\"9\">消防</option><option value=\"10\">餐饮费</option><option value=\"11\">加班费</option><option value=\"12\">协助申办服务费</option></select></td>";
        strRow += "<td><select name=\"F_Units\" class=\"form-control required\"><option value=\"\">请选择</option><option value=\"7\">元/场</option><option value=\"1\">元/天</option><option value=\"5\">元/小时</option><option value=\"2\">元/周</option><option value=\"3\">元/月</option><option value=\"4\">元/半天</option><option value=\"6\">㎡/天</option><option value=\"8\">元/人</option><option value=\"9\">元/度(电)</option><option value=\"10\">元/m³(水)</option><option value=\"11\">元/个</option></select></td>";
        strRow += "<td><input name=\"F_MarketPrice\" type=\"text\" class=\"form-control required number\" placeholder=\"市场刊例价\" value=\"0\" /></td>";
        strRow += "<td><input name=\"F_YUNSPACEPrice\" type=\"text\" class=\"form-control required number\" placeholder=\"YUNSPACE价\" value=\"0\" onchange=\"textChange(this)\" /></td>";
        strRow += "<td><input name=\"area\" type=\"text\" class=\"form-control number\"/></td>";
        strRow += "<td><input name=\"Quantity\" type=\"text\" class=\"form-control required number\" value=\"1\" onchange=\"textChange(this)\" /></td>";
        strRow += "<td><input name=\"totalPrice\" type=\"text\" class=\"form-control required number\" value=\"0\" /></td>";
        strRow += "<td><ul class=\"zdyUL\" style=\"white-space:nowrap;\"><li><a onclick=\"DeleteRow(this)\">删除行</a></li></ul></td>"; 
        strRow += "</tr>";
        $(obj).parent().parent().parent().parent().after(strRow);
    }

    function textChange(obj) {
        var newRow = $(obj).parent().parent();
        newRow[0].cells[9].children[0].value = parseFloat(newRow[0].cells[6].children[0].value) * parseInt(newRow[0].cells[8].children[0].value);
    }

    function changeSelect(obj) {
        var selected = $(obj).val();
        if (selected === "2") {
            var newRow = $(obj).parent().parent();
            newRow[0].cells[4].children[0].value = 1;
            newRow[0].cells[5].children[0].value = currentRow[0].cells[5].children[0].value;
            newRow[0].cells[6].children[0].value = currentRow[0].cells[6].children[0].value;
            newRow[0].cells[7].children[0].value = currentRow[0].cells[7].children[0].value;
            newRow[0].cells[9].children[0].value = currentRow[0].cells[6].children[0].value;
        }
    }

    function DeleteRow(obj) {
        $(obj).parent().parent().parent().parent().remove();
    }

    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        var isCheckPrice = $.request("isCheckPrice");
        $("#newTable tbody tr").each(function () {
            if ($(this).children("td").length>0) {
                var F_ActivityTheme = $("#F_ActivityTheme").html();
                var F_ActivityCityId = $("#F_ActivityCityId").html();
                var siteId = $(this).children("td")[0].id;
                var spaceId = $(this).children("td")[1].id;
                var F_ActivityDate = $(this).children("td")[2].children[0].innerText;
                var F_FeeType = $(this).children("td")[3].children[0].value;
                var F_Units = $(this).children("td")[4].children[0].value;
                var F_MarketPrice = $(this).children("td")[5].children[0].value;
                var F_YUNSPACEPrice = $(this).children("td")[6].children[0].value;
                var area = $(this).children("td")[7].children[0].value;
                var Quantity = $(this).children("td")[8].children[0].value;
                var totalPrice = $(this).children("td")[9].children[0].value;
                $.submitForm({
                    url: "/CheckManager/CheckInfos/InsertOrderPrice",
                    param: {
                        F_CheckId: F_CheckId, F_OrderId: F_OrderId, F_ActivityName: F_ActivityTheme, F_ActivityCity: F_ActivityCityId,
                        F_SiteId: siteId, F_SpaceId: spaceId, F_ActivityDate: F_ActivityDate, F_FeeType: F_FeeType,
                        F_Unit: F_Units, F_MarketPrice: F_MarketPrice, F_YunPrice: F_YUNSPACEPrice, F_SpaceArea: area,
                        F_Quantity: Quantity, F_TotalPrice: totalPrice
                    },
                    success: function () {
                        $.loading(false);
                    }
                });                
            }
            isCheckPrice = false;
        });
    }
</script>
<form id="form1">
    <div style="padding-top: 5px;">
        <table class="form ui-jqgrid-htable ui-common-table table table-bordered">
            <tr class="ui-jqgrid-labels">
                <td class="formTitle">活动名称</td>
                <td><span id="F_ActivityTheme"></span></td>
            </tr>
            <tr class="ui-jqgrid-labels">
                <td class="formTitle">活动城市</td>
                <td><span id="F_ActivityCityId"></span></td>
            </tr>
        </table>
        <table class="form ui-jqgrid-htable ui-common-table table table-bordered" id="newTable">
            <thead>
                <tr class="ui-jqgrid-labels">
                    <th class="ui-th-column ui-th-ltr">场地名称</th>
                    <th class="ui-th-column ui-th-ltr">使用空间</th>
                    <th class="ui-th-column ui-th-ltr">活动档期</th>
                    <th class="ui-th-column ui-th-ltr" style="width:80px;">费用类品</th>
                    <th class="ui-th-column ui-th-ltr" style="width:60px;">单位</th>
                    <th class="ui-th-column ui-th-ltr" style="width:100px;">市场刊例价(元)</th>
                    <th class="ui-th-column ui-th-ltr" style="width:100px;">YUNSPACE价(元)</th>
                    <th class="ui-th-column ui-th-ltr" style="width:80px;">使用面积(㎡)</th>
                    <th class="ui-th-column ui-th-ltr" style="width:40px;">数量</th>
                    <th class="ui-th-column ui-th-ltr" style="width:80px;">合计价格(元)</th>
                    <th class="ui-th-column ui-th-ltr" style="width:70px;">操作</th>
                </tr>
            </thead>
            <tbody></tbody>            
        </table>
    </div>   
</form>

